<template>
  <div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="基本信息" name="basic">
        <el-card>
          <el-form ref="basicForm" :model="basicInfo" label-width="100px">
            <el-form-item label="真实姓名">
              <el-input v-model="basicInfo.realName" />
            </el-form-item>
            <el-form-item label="用户昵称">
              <el-input v-model="basicInfo.nickname" />
            </el-form-item>
            <el-form-item label="用户ID">
              <el-input v-model="basicInfo.userId" />
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="basicInfo.gender" placeholder="请选择">
                <el-option label="男" value="male" />
                <el-option label="女" value="female" />
              </el-select>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="basicInfo.phoneNumber" />
            </el-form-item>
            <el-form-item label="所属学院">
              <el-input v-model="basicInfo.college" />
            </el-form-item>
            <el-form-item label="所属学校">
              <el-input v-model="basicInfo.school" />
            </el-form-item>
            <el-form-item label="所教课程">
              <el-checkbox-group v-model="basicInfo.courses">
                <el-checkbox label="语文" />
                <el-checkbox label="数学" />
                <el-checkbox label="英语" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="身份">
              <el-switch v-model="basicInfo.identity" active-text="学生" inactive-text="老师" />
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="saveBasicInfo">保存</el-button>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="password">
        <el-card>
          <el-form ref="passwordForm" :model="passwordInfo" label-width="100px">
            <el-form-item label="旧密码">
              <el-input type="password" v-model="passwordInfo.oldPassword" />
            </el-form-item>
            <el-form-item label="新密码">
              <el-input type="password" v-model="passwordInfo.newPassword" />
            </el-form-item>
            <el-form-item label="确认新密码">
              <el-input type="password" v-model="passwordInfo.confirmPassword" />
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="verificationCode" style="width: 150px" />
              <span>{{ verificationCode }}</span>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="changePassword">修改密码</el-button>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="修改头像" name="avatar">
        <el-card>
          <el-upload
            action="/uploadAvatar"
            :show-file-list="false"
            :on-success="handleAvatarUploadSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-button type="primary">点击上传头像</el-button>
          </el-upload>
          <img v-if="avatarUrl" :src="avatarUrl" alt="avatar" style="max-width: 200px; max-height: 200px;" />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('basic');
const basicInfo = ref({
  realName: '',
  nickname: '',
  userId: '',
  gender: '',
  phoneNumber: '',
  college: '',
  school: '',
  courses: [],
  identity: false,
});
const passwordInfo = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
});
const verificationCode = ref(generateVerificationCode());
let avatarUrl = ref('');

function handleTabClick(tab) {
  console.log('Tab clicked:', tab);
}

function saveBasicInfo() {
  console.log('Saving basic info:', basicInfo.value);
  // 这里可以添加保存基本信息的逻辑
}

function changePassword() {
  console.log('Changing password:', passwordInfo.value);
  // 这里可以添加修改密码的逻辑
}

function generateVerificationCode() {
  // 生成验证码的逻辑，这里简化为随机生成一个 6 位数字
  return Math.floor(Math.random() * 900000 + 100000);
}

function beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  if (!isJPG) {
    console.error('只能上传 JPG 格式的图片');
  }
  return isJPG;
}

function handleAvatarUploadSuccess(response, file) {
  const { code, data } = response;
  if (code === 200) {
    avatarUrl.value = data.url;
    console.log('Avatar uploaded successfully:', data.url);
  } else {
    console.error('上传头像失败:', response.message);
  }
}
</script>
